﻿@model WebChat.Models.MessageFormViewModel


<script type="text/javascript">


   $(document).ready(function() {
        var first = true;
        var delay = 10000;
            addMessage(function (messages) {
                var strMess="";
                    $.each(messages, function (index, mess) {
                    strMess += "<div id=\"mess"+count()+"\">";
                    if(mess.name == null)
                    {
                        strMess += "<div style=\" width:200px\"> <text>" + mess.Date+ "</text> <br /> <text style=\" font-weight: bold\">" + "Bruker slettet" + "</text></div>";
                    }
                    else
                    {
                        strMess += "<div style=\" width:200px\"> <text>" + mess.Date+ "</text> <br /> <text style=\" font-weight: bold\">" + mess.name + "</text></div>";
                    }
                    if(mess.Message1 != null)
                    {
                        strMess +="<div style=\" font-size:15px\"><p>"+ mess.Message1 + "</p><br />";
                    }
                    else
                    {
                        strMess +="<div>";
                    }
               
                    if(mess.imageId != null)
                    {
                        if(mess.imageType == "image/jpeg" || mess.imageType == "image/png" || mess.imageType == "image/gif" || mess.imageType == "image/bmp")
                        {
                            strMess +=  "<img height=\"140\" width=\"140\" id=\"img\" src=\"../../Message/Image/"+mess.imageId+"\" alt=\"my image\" onmouseover=\"showtrail(800, 600, '/Message/Image/"+mess.imageId+"')\" onmouseout=\"hidetrail()\" />"
                        }
                        strMess += "<br />" + "<a href=\"../../Message/Download/"+mess.imageId+"\">Download: "+mess.imageName+" ("+mess.imageSize/1000+" Kb)" + "</a> </div>";
                    }
                    else
                    {
                        strMess += "</div>";
                    }
                    strMess += "<hr /></div>";
                    
                });
                $(strMess).appendTo("#messages");
                $("#messages").scrollTop($("#messages")[0].scrollHeight);
                });

                setTimeout(function(){
                setInterval(function(){
                var thisCount = count();
                getCount(function(response){           
            if(response > thisCount)
            {
        
            addMessage(function (messages) {
                var strMess="";
                    $.each(messages, function (index, mess) {
                    strMess += "<div id=\"mess"+count()+"\">";
                    strMess += "<div style=\" width:200px\"> <text>" + mess.Date+ "</text> <br /> <text style=\" font-weight: bold\">" + mess.name + "</text></div>";
                    if(mess.Message1 != null)
                    {
                        strMess +="<div style=\" font-size:15px\"><p>"+ mess.Message1 + "</p><br />";
                    }
                    else
                    {
                        strMess +="<div>";
                    }
               
                    if(mess.imageId != null)
                    {
                        if(mess.imageType == "image/jpeg" || mess.imageType == "image/png" || mess.imageType == "image/gif" || mess.imageType == "image/bmp")
                        {
                            strMess +=  "<img height=\"140\" width=\"140\" id=\"img\" src=\"../../Message/Image/"+mess.imageId+"\" alt=\"my image\" onmouseover=\"showtrail(800, 600, '/Message/Image/"+mess.imageId+"')\" onmouseout=\"hidetrail()\" />"
                        }
                        strMess += "<br />" + "<a href=\"../../Message/Download/"+mess.imageId+"\">Download: "+mess.imageName+" ("+mess.imageSize/1000+" Kb)" + "</a> </div>";
                    }
                    else
                    {
                        strMess += "</div>";
                    }
                        strMess += "<hr /></div>";
                    
                });
                $(strMess).appendTo("#messages");
                $("#messages").scrollTop($("#messages")[0].scrollHeight);
            });
            }

        });
    }, 2000);
    }, delay);

            setTimeout(function(){
            first = false;
            }, 10000);

            if(first == false)
            {delay = 1}
        $(function() {
        $('#subform').submit(function(){
            //removeUserFromChat();
            var iframeName = ('iframeUpload');
            //var iframeTemp = $('<iframe id="id_description_iframe" name="'+iframeName+'" src="about:blank" />');
            //iframeTemp.css('display', 'none');
            $(this).attr({
            action: "../../Message/Submit",
            method: "post",
             enctype: 'multipart/form-data',    
             encoding: 'multipart/form-data',
             target: iframeName,
             });
            
            
            setTimeout(function(){
             $('#mess_Message1').val('');
             $('#file').val('');
             }, 1000);
        });
    });
}); 
    
    function count(count)
      {
         parent = document.getElementById("messages");
         kids = parent.childNodes.length;
         return kids;
      }

      function addMessage(callback)
      {
        $.ajax({
            url: "../../api/RoomApi/GetMessage/"+"@Model.chat.Id",
            data: {count: count()},
            type: "GET",
            contentType: "application/json;charset=utf-8",
            }).then(function(mess){
                callback(mess);
            });

      }
      
      function getOldMessages(callback)
      {
      $.ajax({
            url: "../../api/RoomApi/GetOldMessages/"+"@Model.chat.Id",
            data: {},
            type: "GET",
            contentType: "application/json;charset=utf-8",
            }).then(function(mess){
                callback(mess);
            });
      }


      function getCount(callback)
      {
          $.ajax({
            url: "../../api/RoomApi/GetCount/"+"@Model.chat.Id",
            data: {},
            type: "GET",
            contentType: "application/json;charset=utf-8",
            }).then (function(response)
            {   
                callback(response);
                var iFrame =  document.getElementById('id_description_iframe');
                var iFrameBody;
                if ( iFrame.contentDocument ) 
                { // FF
                     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
                }
                else if ( iFrame.contentWindow ) 
                { // IE
                     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
                }
                $('span#respons').html(iFrameBody.innerHTML);
            });           
      }
    
</script>
<fieldset id="messageList">
    <legend>Meldinger</legend>
    <div id="messages"></div>
    <div id="response"></div>
        @using (Html.BeginForm("../Message/Submit", "MessageController", FormMethod.Post, new { enctype = "multipart/form-data" ,id="subform"}))
{
        <div class="editor-label">
            <h3>Skriv en melding</h3>
        </div>
        <div class="editor-field">
           @Html.EditorFor(model => model.mess.Message1, new {id="newMessage" })
            <span id="respons"></span>
        </div>
    
        <label for="file">Fil under 5Mb:</label>
        <input type="file" name="file" id="file" />
    
        <div class="editor-field">
        @Html.HiddenFor(model => model.chat.Id)
        </div>
        <p>
            <input type="submit" id="submit" value="Submit" />
        </p>
}
</fieldset>
<iframe id="id_description_iframe" name="iframeUpload" src="about:blank" style="display: none" />